import React, { useState } from "react";
import {
  SearchOutlined,
  SyncOutlined,
  DownOutlined,
  RightOutlined,
  EditOutlined,
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  Select,
  Col,
  Row,
  Flex,
  Space,
  Table,
  Tag,
  Modal,
} from "antd";
const { confirm } = Modal;
import IconSvg from "@/components/IconSvg"; // 引入svg图标组件
// import { context } from '@/hooks/useContext'
import MenuDialog from "./components/menuDialog";
import {debounce} from '@/utils'
const { Option } = Select;

export const Menu = () => {
  const [form] = Form.useForm();

  // const onGenderChange = (value: string) => {
  //     switch (value) {
  //         case 'male':
  //             form.setFieldsValue({ note: 'Hi, man!' });
  //             break;
  //         case 'female':
  //             form.setFieldsValue({ note: 'Hi, lady!' });
  //             break;
  //         case 'other':
  //             form.setFieldsValue({ note: 'Hi there!' });
  //             break;
  //         default:
  //     }
  // };
  // 定义子组件弹框状体
  const [isModal, setIsModal] = useState({
    isModalStatus: false,
    isModalTitle: "",
  });

  const [okText, setOkText] = useState("");
  const [menuData, setMenuData] = useState({});

  // 查询
  const onFinish = (values: any) => {
    console.log(values);
  };

  // 重置
  const onReset = () => {
    form.resetFields();
  };
  // 关闭子组件弹框
  const onHandleCancel = (data) => {
    setIsModal(data);
  };
  const onHandleOk = (data) => {
    setIsModal(data);
  };

  const add = () => {
    console.log("add: ");
    setIsModal({ isModalStatus: true, isModalTitle: "添加菜单" });
    setMenuData({
      superiorsValue: 0,
      menuType: 1,
      iconValue: "",
      isFrame: 1,
      path: "",
      element: "",
      authorityUrl: "",
      query: "",
      isCache: 0,
      isShow: 0,
      status: 0,
    });
    setOkText('确定')
  };
  // 行修改
  const rowEdit = (record) => {
    setIsModal({ isModalStatus: true, isModalTitle: "修改菜单" });
    setOkText('编辑')
    setMenuData({
      superiorsValue: record.menuParentId,
      menuType: record.menuType,
      iconValue: record.icon,
    });
  };
  // 行新增
  const rowAdd = (record) => {
    console.log("新增: ", record);
    setIsModal({ isModalStatus: true, isModalTitle: "添加菜单" });
    setOkText('确定')
    setMenuData({
      superiorsValue: record.key,
      menuType: record.menuType,
      iconValue: "",
    });
  };
  // 行删除
  const rowDel = debounce((record) => {
    console.log("删除: ", record);
    confirm({
      title: "Are you sure delete this task?",
      icon: <ExclamationCircleFilled />,
      content: "Some descriptions",
      okText: "确认",
      cancelText: "再想想",
      onOk() {
        console.log("OK");
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  }, 500, true);

  const columns = [
    {
      title: "菜单名称",
      dataIndex: "menuName",
      key: "menuName",
      render: (text, record) => <span>{text}</span>,
    },
    {
      title: "图标",
      dataIndex: "icon",
      key: "icon",
      render: (icon) => {
        return <IconSvg name={icon} />;
      },
    },
    {
      title: "排序",
      dataIndex: "orderNum",
      key: "orderNum",
    },
    {
      title: "权限标识",
      dataIndex: "perms",
      key: "perms",
    },
    {
      title: "组件路径",
      dataIndex: "element",
      key: "element",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "tags",
      render: (_, { status }) => <Tag color="processing">{status}</Tag>,
    },
    {
      title: "创建时间",
      key: "createTime",
      dataIndex: "createTime",
      // render: (_, tags) => (
      //     <span>
      //         {tags.createTime}
      //     </span>
      // ),
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={(e) => rowEdit(record)}>
            <EditOutlined /> 修改
          </a>
          <a onClick={(e) => rowAdd(record)}>
            <PlusOutlined /> 新增
          </a>
          <a onClick={(e) => rowDel(record)}>
            <DeleteOutlined /> 删除
          </a>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: 1,
      menuParentId: 0,
      menuName: "系统管理",
      icon: "system",
      orderNum: 1,
      menuType: 1,
      perms: "",
      element: "LayOutIndex",
      status: "正常",
      createTime: "2023-04-23 16:11:49",
      children: [
        {
          key: 2,
          menuParentId: 1,
          menuName: "用户管理",
          icon: "user",
          orderNum: 1,
          menuType: 2,
          perms: "system:user:list",
          element: "system/user/index",
          status: "正常",
          createTime: "2023-04-23 16:11:49",
        },
        {
          key: 3,
          menuParentId: 1,
          menuName: "角色管理",
          icon: "role",
          orderNum: 2,
          menuType: 2,
          perms: "system:role:list",
          element: "system/role/index",
          status: "正常",
          createTime: "2023-04-23 16:11:49",
        },
        {
          key: 4,
          menuParentId: 1,
          menuName: "菜单管理",
          icon: "menu",
          orderNum: 3,
          menuType: 2,
          perms: "system:menu:list",
          element: "system/menu/index",
          status: "正常",
          createTime: "2023-04-23 16:11:49",
        },
      ],
    },
  ];

  return (
    <div className="Menu pageWarpper">
      <Form form={form} name="control-hooks" onFinish={onFinish}>
        <Row gutter={20}>
          <Col span={6}>
            <Form.Item name="name" label="菜单名称">
              <Input placeholder="请输入 菜单名称" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="status" label="状态">
              <Select placeholder="请选择 状态" allowClear>
                <Option value="正常">正常</Option>
                <Option value="停用">停用</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                <SearchOutlined />
                查询
              </Button>
              <Button
                htmlType="button"
                onClick={onReset}
                style={{ marginLeft: 10 }}
              >
                <SyncOutlined />
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Flex gap="small" wrap="wrap" style={{ marginBottom: "12px" }}>
        <Button type="primary" onClick={(e) => add()}>
          新增
        </Button>
      </Flex>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        rowKey="key"
        expandable={{
          // expandedRowRender: record => (
          //     <p style={{ margin: 0 }}>{record}</p>
          // ),
          expandIcon: ({ expanded, onExpand, record }) => {
            if (record.children && record.children.length != 0) {
              if (expanded) {
                return <DownOutlined onClick={(e) => onExpand(record, e)} />;
              } else {
                return <RightOutlined onClick={(e) => onExpand(record, e)} />;
              }
            } else {
              return "";
            }
          },
        }}
      />
      {isModal?.isModalStatus && (
        <MenuDialog
          isModal={isModal}
          okText={okText}
          onHandleOk={onHandleOk}
          onHandleCancel={onHandleCancel}
          menuData={menuData}
        />
      )}
    </div>
  );
};

export default Menu;
